import React, { useState, useEffect, useRef } from 'react'
import { View, ScrollView } from '@tarojs/components'
import { Icon } from '@/components/Icon'
import Taro from '@tarojs/taro'
import { Observer, useLocalStore } from 'mobx-react'
import { cartModel } from '@/model/CartModel'
import { Empty } from '@/components/Empty';
import { ButtonEle, ButtonType } from "@/components/Buttton";
import { OrderType } from '@/components/OrderType';
import { sceneDesktopManager } from '@/model/SceneDesktopManger'
import CartItem from '../CartItem'
import { Popup } from '../Popup'
import './index.scss'


export default (props) => {
  const { visible } = props
  const [goodsListVisible, setGoodsListVisible] = useState(false)
  const cartRef: any = useRef()
  const [height, setHeight] = useState(0)

  const store = useLocalStore(() => cartModel)

  useEffect(() => {
    const sysInfo = Taro.getSystemInfoSync()
    setHeight(sysInfo.windowHeight * .9)
    Promise.resolve().then(() => {
      store.getData();
      store.getConfig();
    })
  }, [])


  return (
    <Observer>
      {
        () => (
          <View style={{ display: visible ? 'block' : 'none' }}>
            <View className='xxm-cart-icon'
              ref={cartRef}
              style={{ zIndex: 100, position: 'fixed', left: '10px', bottom: '60px' }}
              onClick={() => {
                setGoodsListVisible(true)
              }}
            >
              <View className='xxm-inner'>
                <Icon
                  name="gouwuchezhengpin"
                  info={store.total > 0 ? `${store.total}` : ''}
                  size={24}
                  color="#F43443"
                  customStyle={{ top: '5px', right: '8px' }}

                  customIconStyle={{ fontWeight: 700 }}
                />

              </View>
            </View>
            <Popup
              visible={goodsListVisible}
              position="bottom"
              closeOnClickOverlay
              name="bottom"
              onClose={() => {
                setGoodsListVisible(false)
              }}

              customStyle={{ height: '80%' }}
              closeable
              round>
              <View className='xxm-cart' style={{ maxHeight: `${height}px` }}>
                <View className='xxm-cart-header'>
                  <View className='xxm-title'>
                    已点清单（{store.total}）
                  </View>
                  <View className='xxm-flex'>
                    <View className='xxm-left'>
                      {/* <Text className='xxm-label'>您的座位号：</Text>
                      <Text className='xxm-value'>4号桌</Text> */}
                    </View>
                    <View
                      className='xxm-right'
                      onClick={() => {
                        store.clearCart()
                        setGoodsListVisible(false)
                      }}
                    >
                      <Icon name='training'></Icon>
                      清空{store.isCatering ? '菜单' : '购物车'}
                    </View>
                  </View>
                </View>
                <View className='items'>
                  <ScrollView style={{ height: '100%' }} scrollY>
                    {
                      store.items.map((cart, idx) => {

                        return (
                          <View className='item' key={idx}>
                            <CartItem {...cart} />
                          </View>
                        )
                      })
                    }
                    {
                      store.items.length === 0 &&
                      <Empty
                        img="http://xmmi.oss-cn-beijing.aliyuncs.com/icon/empty-car.png"
                        desc={`对不起，您还木有${store.isCatering ? '点餐' : '购物'}`}
                      />
                    }
                  </ScrollView>
                </View>
                <View className='xxm-bar'>
                  <View className='xxm-detail'>
                    <View>共{store.total}{store.isCatering ? '道菜' : '件商品'}</View>
                    <View>合计：￥{store.totalFree}</View>
                  </View>
                  <ButtonEle
                    customClass="xxm-btn"
                    type={ButtonType.PRI}
                    square
                    onClick={() => setGoodsListVisible(false)}
                    round
                  >
                    继续{store.isCatering ? '点菜' : '购物'}
                  </ButtonEle>
                  <ButtonEle
                    customClass="xxm-btn active"
                    type={ButtonType.PRI}
                    square
                    disabled={store.items.length === 0}
                    onClick={() => {
                      setGoodsListVisible(false)
                      Taro.navigateTo({ url: '/pages/checklist/checklist/index' })
                    }}
                    round
                  >
                    去结算
                  </ButtonEle>
                </View>
              </View>
            </Popup>
            <OrderType
              vis={store.visOrderType}
              onClose={() => store.setValue('visOrderType', false)}
              scanCode={() => store.scanCode()}
              setOrder={(val) => {
                sceneDesktopManager.setOrderType(val);
                store.setValue('visOrderType', false)
              }}
            />
          </View>
        )
      }
    </Observer >
  )
}